<template>
  <div class="t-check-item-wrap">
    <div class="check-item-list">
      <div
        class="check-item"
        v-for="op in options"
        :key="op.value"
      >
        {{ op.label }}
        <div class="btn-wrap">
          <div
            class="btn-item"
            v-for="bt in btnList"
            :key="bt.value"
            @click="handleClick(op, bt)"
            :class="{ active: isChecked(op, bt) }"
          >
            {{ bt.label }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { formEmits, formItemProps, useFormItem } from "@/views/formgen/components/FormItem/hooks/useFormItemHook";
import { onMounted, PropType, ref } from "vue";

interface Item {
  label: string;
  value: string;
}

const props = defineProps({
  ...formItemProps,
  options: {
    type: Array as PropType<Item[]>,
    default: () => []
  },
  btnList: {
    type: Array as PropType<Item[]>,
    default: () => []
  }
});

const emits = defineEmits(formEmits);

const { updateValue } = useFormItem(props, emits, false);

interface ValueItem {
  optionValue: string;
  btnValue: string;
  optionLabel: string;
  btnLabel: string;
}

const selectValue = ref<Record<string, ValueItem>>({});

const handleClick = (item: Item, btnItem: Item) => {
  selectValue.value[`${item.value}`] = {
    optionValue: item.value,
    btnValue: btnItem.value,
    optionLabel: item.label,
    btnLabel: btnItem.label
  };
  // 全部选中
  if (Object.keys(selectValue.value).length == props.options.length) {
    updateValue(Object.values(selectValue.value));
  }
};
const isChecked = (item: Item, btnItem: Item) => {
  return selectValue.value[`${item.value}`]?.btnValue == btnItem.value;
};

onMounted(() => {
  if (props.value) {
    const value = props.value as ValueItem[];
    value.forEach(item => {
      selectValue.value[`${item.optionValue}`] = item;
    });
  }
});
</script>
<style scoped lang="scss">
.t-check-item-wrap {
  width: 100%;
  height: 100%;
  display: flex;
  color: var(--form-theme-optionFontColor);

  .check-item-list {
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    border-radius: 4px;
    justify-content: center;
    border: var(--el-border);

    .check-item {
      color: var(--form-theme-optionFontColor);
      font-size: var(--form-theme-optionFontSize, 14px);
      width: 100%;
      height: calc(30px + var(--form-theme-optionFontSize, 14px));
      line-height: calc(30px + var(--form-theme-optionFontSize, 14px));
      border-bottom: var(--el-border);
      padding: 0 10px;

      &:not(:first-child) {
        border-top: none;
      }

      &:last-child {
        border-bottom: none;
      }

      .btn-wrap {
        float: right;
        display: flex;
        color: var(--el-text-color-primary);
        cursor: pointer;
        user-select: none;

        .btn-item {
          margin-left: 30px;
          cursor: pointer;

          &:first-child {
            margin-left: 0;
          }

          &:hover {
          }

          &.active {
            color: white;
            /* color: white; */
            margin-top: 7px;
            text-align: center;
            height: 30px;
            width: 60px;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 8px;
            background-color: var(--el-color-primary) !important;
          }
        }
      }
    }
  }
}
</style>
